// 1. 导入
import Confirm from '@/components/confirm'
import Message from '@/components/message'
import useStore from '@/store'
import { createRouter, createWebHashHistory } from 'vue-router'
// 2.创建实例
const router = createRouter({
  history: createWebHashHistory(), // v3中路由必须得指定路由模式
  scrollBehavior(to, from, savedPosition) {
    // to 是要去哪, from是从哪来, savedPosition记录的之前滚动的距离 savedPosition 高版本浏览器
    // console.log(to, from, savedPosition)
    // return { top: 0 } // 始终回到顶部, 从0开始滚动
    /*  有记录配合前进和后退按钮 保留之前的滚动位置 
   if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0, behavior: 'smooth' }
    } */
    return { top: 0, behavior: 'smooth' }
  },
  routes: [
    {
      path: '/playground',
      component: () => import('@/views/playground/index.vue'),
    },
    { path: '/login', component: () => import('@/views/Login/index.vue') },
    {
      path: '/login/callback',
      component: () => import('@/views/Login/callback.vue'),
    },
    {
      path: '/',
      component: () => import('@/views/Layout/index.vue'),
      children: [
        { path: '', component: () => import('@/views/home/index.vue') },
        {
          path: 'category/:id',
          component: () => import('@/views/category/index.vue'),
        },
        {
          path: '/category/sub/:id',
          component: () => import('@/views/category/sub.vue'),
        },
        {
          path: '/goods/:id',
          component: () => import('@/views/goods/index.vue'),
        },
        {
          path: '/cart',
          component: () => import('@/views/cart/index.vue'),
        },
        {
          path: '/member/checkout',
          component: () => import('@/views/member/pay/checkout.vue'),
        },
        {
          path: '/member/pay',
          component: () => import('@/views/member/pay/index.vue'),
        },
        {
          path: '/pay/callback',
          component: () => import('@/views/member/pay/callback.vue'),
        },
        {
          path: '/member',
          component: () => import('@/views/member/layout/index.vue'),
          children: [
            {
              path: '',
              component: () => import('@/views/member/home/index.vue'),
            },
            {
              path: 'order',
              component: () => import('@/views/member/order/index.vue'),
            },
          ],
        },
      ],
    },
  ],
})

// 导航守卫
router.beforeEach((to, from, next) => {
  const { cart } = useStore()
  // 判断是否登录(token), 登录的情况下, 想去哪就去哪,
  if (cart.isLogin) {
    next()
  } else {
    //  没有登录 还要去以/member开始的路由地址, 就要拦截到登录页面
    console.log(to)
    if (to.path.includes('/member')) {
      Confirm({ title: '温馨提示', text: '请登录后提交订单' })
        .then(() => {
          // 拦截到登录页面后记录本来要去的页面的路由地址
          // next(`/login?redirectURL=${to.fullPath}`)
          // next()其实和router.push() 传递的参数是一样的
          next({
            path: '/login',
            query: {
              redirectURL: to.fullPath,
            },
          })
        })
        .catch(() => {
          Message.info('已取消')
        })
    } else {
      next()
    }
  }
})
// 3. 导出并在main.ts中挂载
export default router
// 4. 准备路由出口
